
<!-- 分仓管理 -->
<template>
  <div class="container-ymm">
    <div ref="pageTop" class="header-ymm">
      <el-select v-model="branchStatus" placeholder="全部状态" class="seach-select" size="small">
        <el-option
          v-for="item in branchStatusList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="selectStoreId" placeholder="全部门店" class="seach-select" size="small">
        <el-option>全部门店</el-option>
        <el-option
          v-for="item in storeList"
          :key="item.storeId"
          :label="item.storeName"
          :value="item.storeId"
        />
      </el-select>

      <el-date-picker
        v-model="createTimeInterval"
        type="daterange"
        size="small"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />

      <el-input
        v-model="searchValue"
        type="text"
        class="seach-input"
        size="small"
        placeholder="输入用户、地址、供应商、SKU、商城订单查询"
      >
        <i slot="prefix" class="el-input__icon el-icon-search" />
      </el-input>
      <el-button class="greenbt" size="small" @click="searchMallOrderItem">查询</el-button>
      <el-button
        v-show="checkPermission('pas:branch:authority')"
        :disabled="isBranchButtondisabled"
        class="greenbt"
        size="small"
        @click="exchangeFun()"
      >分仓</el-button>
    </div>
    <div ref="pageCenter" class="table-ymm">
      <el-table
        :data="mallOrderItemList"
        height="450"
        style="width: 100%"
        border
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column :selectable="isRowDisable" type="selection" width="50" />
        <el-table-column label="订单来源" width="120" >
          <template slot-scope="scope">
            <span style="color:#28A087">{{ scope.row.orderSourceSrc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提货方式" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.deliveryMode === '1' ? '门店提货' : '快递' }}</span>
          </template>
        </el-table-column>
        <el-table-column :formatter="formatterClassification" prop="classification" label="分类" width="60"/>
        <!-- <el-table-column label="分类">
          <template slot-scope="scope">
            <span>{{ scope.row.classification | formatterClassification}}</span>
          </template>
        </el-table-column>-->
        <el-table-column label="SKU名称" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.skuName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SKU编码" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.skuCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="60">
          <template slot-scope="scope">
            <span>{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="可用库存" width="80">
          <template slot-scope="scope">
            <span style="color:blue" @click="stockNum(scope.row.skuId)">{{ scope.row.systemStock }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分仓状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.isBranch=='1' && scope.row.commodityState !==6" style="color:#28A087">已处理</span>
            <span v-else-if="scope.row.isBranch=='-1' && scope.row.commodityState !==6" style="color:#F05050">待处理</span>
            <span v-else-if="scope.row.commodityState ===6" style="color:#F05050">已取消</span>
          </template>
        </el-table-column>
        <el-table-column label="用户地址" width="450">
          <template slot-scope="scope">
            <span>{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单号" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.mallOrderNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.otherRemark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发货明细" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.shipmentPipelineNumber }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div ref="pageBottom" class="table-ymm-bt">
      <el-pagination
        v-show="mallOrderItemListQuery.total>0"
        :current-page="mallOrderItemListQuery.page"
        :page-sizes="[30,50,100,500,1000]"
        :page-size="mallOrderItemListQuery.pageSize"
        :total="mallOrderItemListQuery.total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="mallOrderItemhandleSizeChange"
        @current-change="mallOrderItemhandleCurrentChange"
      />
    </div>
    <component
      :is="modal"
      :modal-data="modalData"
      :modal-static-data="{selectMallOrderItemList,closeChildAndRefresh}"
      @close="closeChild"
    />

    <el-dialog :visible.sync="dialogTableVisible" title="" width="23%">
      <el-table :data="gridData" >
        <el-table-column property="warehouseName" label="仓库名" width="100"/>
        <el-table-column property="systemStock" label="数量" width="80"/>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { get, initModuleHeight } from '@/api/utils'
import { message } from '@/utils/utils'
import Selects from './dialog/Select.vue'
import { parseTime } from '@/utils/index'
import { getUserInfo } from '@/api/login'
export default {
  data() {
    return {
      modal: null,
      modalData: {},
      search: {
        status: '',
        status_options: [],
        shop: '',
        shop_options: [],
        date: '',
        search_name: ''
      },
      dialogTableVisible: false,
      gridData: [],
      searchValue: null,
      branchStatusList: [
        { label: '全部状态', value: '' },
        { label: '已处理', value: 1 },
        { label: '待处理', value: 2 },
        { label: '已取消', value: 3 }
      ],
      branchStatus: 2,
      selectStoreId: null,
      createTimeInterval: null,
      mallOrderItemList: [],
      selectMallOrderItemList: [],
      storeList: [],
      mallOrderItemListQuery: {
        page: 1,
        pageSize: 30,
        total: 0,
        keyword: null,
        starTime: null,
        endTime: null,
        shipmentNo: null,
        time: null,
        pageNumber: null
      },
      isBranchButtondisabled: true,
      clientHeight: null,
      module: {
        pageTop: {
          size: 0.1,
          height: 0
        },
        pageCenter: {
          size: 0.6,
          height: 0
        },
        pageBottom: {
          size: 0.2,
          height: 0
        }
      },
      tableHeight: 0
    }
  },
  watch: {
    clientHeight: function() {
      this.module = initModuleHeight(this.clientHeight, this.module)
      this.resizePageHeight(this.module)
    }
  },
  created() {
    this.getMallOrderItemList()
    this.getStoreList()
    this.getPermission()
  },
  mounted() {
    const that = this
    that.clientHeight = `${document.documentElement.clientHeight}`
    window.onresize = () => {
      return (() => {
        that.clientHeight = `${document.documentElement.clientHeight}`
      })()
    }
  },
  methods: {
    // 重置页面高度
    resizePageHeight(module) {
      const self = this
      const pageTop = self.$refs.pageTop
      const pageCenter = self.$refs.pageCenter
      const pageBottom = self.$refs.pageBottom

      pageTop.style.height = module.pageTop.height + 'px'
      pageCenter.style.height = module.pageCenter.height + 'px'
      pageBottom.style.height = module.pageBottom.height + 'px'
      self.tableHeight = module.pageCenter.height - 40
    },
    stockNum(skuId) {
      this.skuId = skuId
      var data = {
        skuId: skuId
      }
      get('/wxh-cloud-rest/rest/', '/pas/stock/getStockNum', data)
        .then(response => {
          if (response.data.status === 'success') {
            this.gridData = response.data.data.list
          }
        })
      this.dialogTableVisible = true
    },
    formatterClassification(row, column) {
      if (row.classification) {
        if (row.classification === 1) {
          return '整机'
        } else if (row.classification === 2) {
          return '工具'
        } else if (row.classification === 3) {
          return '辅材'
        } else if (row.classification === 4) {
          return '赠品'
        }
      }
    },
    getMallOrderItemList(page) {
      this.mallOrderItemListQuery.pageNumber =
        ((page || this.mallOrderItemListQuery.page) - 1) *
        this.mallOrderItemListQuery.pageSize

      var data = {
        offset: this.mallOrderItemListQuery.pageNumber,
        count: this.mallOrderItemListQuery.pageSize,
        skuSalesType: 2,
        getMallOrderInfo: 1,
        getShipmentInfo: 1,
        orderState: 'ALREADY',
        getisBranch: 1
      }

      if (this.branchStatus) data.branchStatus = this.branchStatus
      if (this.selectStoreId) data.storeId = this.selectStoreId
      if (this.searchValue) data.keyword = this.searchValue

      if (this.createTimeInterval && this.createTimeInterval.length > 0) {
        data.starTime = this.createTimeInterval[0].getTime()
        data.endTime = this.createTimeInterval[1].getTime()
      }

      get('/wxh-cloud-rest/rest/', '/pas/mallOrderItem/list', data)
        .then(response => {
          if (response.data.status === 'success') {
            // console.log('-------------------------------------------------------------')
            this.mallOrderItemListQuery.total =
              response.data.data.mallOrderItemCount
            this.mallOrderItemList = response.data.data.mallOrderItemList.map(
              mallOrderItem => {
                if (mallOrderItem) {
                  if (
                    mallOrderItem.createTime &&
                    mallOrderItem.createTime !== null
                  ) {
                    mallOrderItem.createTime = parseTime(
                      mallOrderItem.createTime
                    )
                  }

                  if (mallOrderItem.isBranch) {
                    mallOrderItem.isBranchSrc = '未处理'
                    if (mallOrderItem.isBranch === 1) {
                      mallOrderItem.isBranchSrc = '已处理'
                    }
                  }
                  this.processOrderSource(mallOrderItem)
                  this.tableHeight = this.tableHeight - 1
                }
                return mallOrderItem
              }
            )

            console.log(response.data.data.list)

            // console.log(this.skuList)
            this.listLoading = false
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
            this.listLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.listLoading = false
        })
    },

    processOrderSource(mallOrder) {
      if (mallOrder) {
        var storeName = mallOrder.storeName ? mallOrder.storeName : ''
        storeName = storeName !== '中心仓' ? storeName : '总部'
        if (mallOrder.orderSource) {
          if (mallOrder.orderSource === '1') {
            mallOrder.orderSourceSrc = 'APP - ' + storeName
          } else if (mallOrder.orderSource === '2') {
            mallOrder.orderSourceSrc = 'APP - ' + storeName
          } else if (mallOrder.orderSource === '3') {
            mallOrder.orderSourceSrc = '小程序'
          } else if (mallOrder.orderSource === '4') {
            mallOrder.orderSourceSrc = '后台 - ' + storeName
          } else if (mallOrder.orderSource === '5') {
            mallOrder.orderSourceSrc = 'APP-网批'
          } else if (mallOrder.orderSource === '6') {
            mallOrder.orderSourceSrc = '采销'
          }
        }
      }
    },

    getStoreList() {
      var data = { deteleFlag: 'N', offset: '0' }
      console.log('------------------------------------------')
      get('/wxh-cloud-rest/rest/', '/pas/store/queryPermissionsStore', data)
        .then(response => {
          if (response.data.status === 'success') {
            this.storeList = response.data.data.list
          } else if (response.data.status === 'token_check_faild') {
            message(this, response.data.messge)
          }
        })
        .catch(error => {
          console.log(error)
          message(this, '数据加载失败')
        })
    },

    // 分页
    mallOrderItemhandleSizeChange(val) {
      this.mallOrderItemListQuery.pageSize = val
      this.getMallOrderItemList()
    },
    // 表格选择
    mallOrderItemhandleCurrentChange(val) {
      this.mallOrderItemListQuery.page = val
      this.getMallOrderItemList()
    },
    searchMallOrderItem() {
      this.mallOrderItemListQuery.page = 1
      this.getMallOrderItemList()
    },
    exchangeFun() {
      if (
        !this.selectMallOrderItemList ||
        this.selectMallOrderItemList.length <= 0
      ) {
        this.modalData = { type: '1' }
      }
      this.modal = Selects
    },
    closeChild() {
      this.modal = null
    },
    handleSelectionChange(value) {
      console.log(value)
      this.selectMallOrderItemList = value
      this.isBranchButtondisabledFun()
    },
    isRowDisable(row) {
      if (row && row.isBranch && row.isBranch === -1 && row.commodityState !== 6) {
        return true
      }
      return false
    },

    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下

      // console.log(arr)
      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'sidebarStatus') {
          this.userid = arr2[1]
        }
      }

      // console.log('this.userid = ' + this.userid)

      if (localStorage.getItem(this.userid)) {
        return
      }

      // console.log('response-------------------')
      getUserInfo().then(response => {
        // console.log('response' + response)
        if (response.data.status === 'ok') {
          localStorage.setItem(
            this.userid,
            JSON.stringify(response.data.data.permissions)
          )
        }
      })
    },

    closeChildAndRefresh() {
      this.modal = null
      this.mallOrderItemListQuery.page = 1
      this.getMallOrderItemList()
    },

    checkPermission(value) {
      if (value) {
        if (
          localStorage.getItem(this.userid) &&
          localStorage.getItem(this.userid).indexOf(value) >= 0
        ) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    isBranchButtondisabledFun() {
      // this.isBranchButtondisabled = (!(this.selectMallOrderItemList != null && this.selectMallOrderItemList.length >= 0) ? 'false' : 'true')
      this.isBranchButtondisabled = !(
        this.selectMallOrderItemList !== null &&
        this.selectMallOrderItemList.length > 0
      )
      console.log(
        !(
          this.selectMallOrderItemList !== null &&
          this.selectMallOrderItemList.length > 0
        )
      )
      console.log(this.isBranchButtondisabled)
    }
  }
}
</script>

<style>
   body{
     background-color: #ffffff;
   }
    /*表格头部颜色*/
  .el-table__header thead  tr th{
      background-color: #edf4f9;
  }
  /*表格字体*/
  .el-table tr {
      font-size: 12px;
  }
  /*表格行高*/
  .el-table .cell{
    line-height: 1.2;
  }
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
     background-color: #D7FFD7 !important;
    /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #D7FFD7;
    /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
  }

</style>
